import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import SearchView from '@/views/SearchView.vue'
import NotFound from '@/components/NotFound.vue'

// 路由规则
// 地址 和组件的对应关系
const routes = [
  // { path: '/home', component: HomeView },
  // { path: '/search', component: SearchView }
  // --------------普通加载--------------
  // 重定向
  // path 解析到的地址，跳转到 redirect 对应的地址
  // 路由对应的页面默认会打包到一起，增加应用的大小
  // { path: '/', redirect: '/home' },
  // { path: '/home', name: 'home', component: HomeView },
  // // /:words 必须要传递
  // // /:words? 参数可选，不写也可以
  // { path: '/search/:words?', name: 'search', component: SearchView },
  // { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }

  // --------------懒加载--------------
  // 懒加载的路由页面，默认不会下载到用户的浏览器中
  // 访问对应路由的时候才会去加载
  { path: '/', redirect: '/home' },
  { path: '/home', name: 'home', component: () => import('@/views/HomeView.vue') },
  { path: '/my', name: 'my', component: () => import('@/views/MyView.vue') },
  // /:words 必须要传递
  // /:words? 参数可选，不写也可以
  { path: '/search/:words?', name: 'search', component: () => import('@/views/SearchView.vue') },
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: () => import('@/components/NotFound.vue') }
]

const router = createRouter({
  // hash 模式 url 中有#
  // history: createWebHashHistory(),
  // history 模式，没有# ，url 更为精美（较为常用的模式）
  history: createWebHistory(),
  routes
})

export default router
